const http = require("http");
const urlTool = require("url");
const fs = require("fs");
let mingzhu = ["西游记", "红楼梦", "三国演义", "水浒传"];

//创建服务对象
const server = http.createServer((req, res) => {
  //设置字符集的响应头                          「=」的左右两侧不能加空格
  // res.setHeader('content-type','text/html;charset=utf-8');
  //获取请求的方法和路径
  let { url, method } = req; // req.method  req.url  {method: 'xxx', url: 'xxx'}
  //转换
  method = method.toUpperCase();
  //获取路径
  let { pathname } = urlTool.parse(url);
  //将 url 中转码的内容还原
  pathname = decodeURIComponent(pathname);
  //设置静态资源目录
  let dir = "./test";
  //根据 pathname 拼接文件的路径
  let filePath = dir + pathname;

  //读取文件的内容  GET /mingzhu 响应名著的列表
  fs.readFile(filePath, (err, data) => {
    if (err) {
      //文件不存在
      if (err.errno === -4058) {
        //对 URL 的路径进行判断 
        if (pathname === "/mingzhu" && method === "GET") {
          res.write(`<!DOCTYPE html>
                      <html lang="en">
                      <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Document</title>
                        <link rel="stylesheet" href="/css/app.css" />
                      </head>
                      <body>
                      <h2>服务端渲染</h2>
                      <img src="/img/logo.png" />
                      <script src="/js/app.js"></script>
                      <ul>
                      `);
          //遍历数组
          mingzhu.forEach((item) => {
            res.write(`<li>${item}</li>`);
          });
          //输出另外一半 ul
          res.write(`</ul></body>
          </html>`);
          res.end();
        } else if (pathname === "/mz" && method === "GET") {
          res.end(`<!DOCTYPE html>
                  <html lang="en">
                  <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>四大名著</title>
                    <link rel="stylesheet" href="/a/b/c" />
                  </head>
                  <body>
                    <h2>客户端渲染</h2>
                    <ul></ul>
      
                    <script>
                      //获取 ul
                      let ul = document.querySelector('ul');
                      //这里的数据将来可以通过 AJAX 请求获取到
                      let data = ["西游记", "红楼梦", "三国演义", "水浒传"];
                      //遍历 data
                      data.forEach(item => {
                        //创建节点
                        let li = document.createElement('li');
                        //设置 li 的标签文本
                        li.innerHTML = item;
                        //将 li 插入到 ul 中
                        ul.append(li);
                      });
                    </script>
                  </body>
                  </html>`);
        } else {
          res.statusCode = 404;
          res.end("<h1>404 Not Found</h1>");
          return;
        }
      }
    }
    //设置为响应体
    res.end(data);
  });
});

//监听端口, 启动服务
server.listen(3000, () => {
  console.log("服务已经启动, 端口 3000 监听中....");
});
